<template>
  <div class="factory-brand-info">
    <a-layout>
      <a-layout-sider style="width: 200px">
        <div class="brand-list">
          <div
            class="brand-item"
            v-for="(item, index) in brandList"
            :key="index"
            :class="{ active: currObj.brandId === item.brandId }"
            @click="handBrand(item)"
          >
            <div>
              <p class="text-over" v-if="!item.isEdit">{{ item.bandName }}</p>
              <!-- <a-input v-else v-model.trim="item.bandName" allow-clear size="mini" @click.stop @keyup.enter="editNameOk(item)" /> -->
              <span>
                <!-- <img class="mr6" src="@/assets/images/edit.png" alt="" @click.stop="item.isEdit = true" /> -->
                <img
                  class="mr6"
                  src="@/assets/images/edit.png"
                  alt=""
                  @click.stop="
                    () => {
                      currObj2 = item;
                      actionType = 'edit';
                      form.name = item.bandName;
                      visible = true;
                    }
                  "
                />
                <img src="@/assets/images/del.png" alt="" @click.stop="del(item)" />
              </span>
            </div>
          </div>
        </div>
        <a-button
          type="primary"
          class="add-btn"
          @click="
            () => {
              actionType = 'add';
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加关联品牌名
        </a-button>
      </a-layout-sider>
      <a-layout-content>
        <template v-if="currObj.brandId">
          <BrandCom ref="comRef" :detailInfo="detailInfo" @cancel="cancel" />
        </template>
        <div v-else style="height: 100%; display: flex; align-items: center">
          <a-empty>
            <template #image>
              <img src="@/assets/images/empty-icon.jpg" alt="" style="width: 200px; height: 200px" />
            </template>
            这里暂时什么都没有，请添加关联品牌名
          </a-empty>
        </div>
      </a-layout-content>
    </a-layout>

    <a-modal
      v-model:visible="visible"
      title-align="start"
      :closable="false"
      :title="actionType === 'add' ? '添加关联品牌名' : '修改关联品牌名'"
      @cancel="handleCancel"
      @before-ok="handleBeforeOk"
    >
      <a-form :model="form">
        <a-form-item
          field="name"
          label="旗下品牌"
          :rules="[{ required: true, message: '请选择' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.name" max-length="20" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import { IconPlusCircleFill, IconDelete, IconUpload, IconPlus } from "@arco-design/web-vue/es/icon";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { Message } from "@arco-design/web-vue";
import BrandCom from "./FactoryBrandInfoCom.vue";
import { getBrandInfoList, saveBrandInfo, getBrandInfo, deleteBrandInfo } from "@/apis/business";
import { useRoute } from "vue-router";
const route = useRoute();
import { Modal } from "@arco-design/web-vue";

const isReadonly = ref(false);
const brandList = ref([]);
const currObj = ref({ brandId: null });
const detailInfo = ref({});
const comRef = ref();
const visible = ref(false);
const form = ref({});
const actionType = ref("add");
const currObj2 = ref({});

watch(
  () => currObj.value.brandId,
  async val => {
    await getDetail();
  },
  { deep: true }
);

onMounted(async () => {
  await getList();
  getDetail();
});

const cancel = async () => {
  await getDetail();
};

const handleBeforeOk = async done => {
  if (actionType.value === "add") {
    await addLeftMEnu();
  } else {
    await editNameOk(currObj2.value);
  }
  done();
  // console.log(form);
  // window.setTimeout(() => {
  //   done();
  //   // prevent close
  //   // done(false)
  // }, 3000);
};
const handleCancel = () => {
  form.value = {};
  visible.value = false;
};

const del = item => {
  deleteBrandInfo({ brandId: item.brandId }).then(res => {
    if (res.code === 200) {
      getList();
    }
  });
};

const getDetail = async () => {
  console.log(90909090, currObj.value);
  if (currObj.value.brandId) {
    await getBrandInfo({ brandId: currObj.value.brandId }).then(res => {
      if (res.code === 200) {
        console.log("详情信息===", res.data);
        detailInfo.value = res.data;
      }
    });
  }
};

const getList = async () => {
  const res = await getBrandInfoList({ factoryId: route.query.factoryId });
  brandList.value = res.data || [];
  if (brandList.value.length <= 0) currObj.value.brandId = null;
  if (!currObj.value.brandId) {
    currObj.value = brandList.value.length > 0 ? brandList.value[0] : {};
  }
  setTimeout(() => {
    isReadonly.value = true;
  }, 500);
};

const addLeftMEnu = async () => {
  await saveBrandInfo({ bandName: form.value.name, factoryId: route.query.factoryId }).then(res => {
    if (res.code === 200) {
      form.value.name = null;
      getList();
    }
  });
};

const editNameOk = item => {
  saveBrandInfo({ brandId: item.brandId, bandName: form.value.name, factoryId: route.query.factoryId, updateTitle: true }).then(
    async res => {
      if (res.code === 200) {
        await getList();
        getDetail();
      }
    }
  );
  item.isEdit = false;
};

const handBrand = async item => {
  // if (!(isSave.value || item.brandId === currObj.value.brandId)) {
  if (!(item.brandId === currObj.value.brandId)) {
    Modal.open({
      title: "提示",
      content: "温馨提示：请保存品牌信息后在进行切换，否则当前所填写的品牌信息将不会被保存，是否保存？",
      onOk: async () => {
        comRef.value.reloadY();
        currObj.value = item;
        await getDetail();
      }
    });
  }
};

const getFormData = async () => {
  const res = await getBrandInfoList({ factoryId: route.query.factoryId });
  return { ...comRef.value.getFormData(), brandList: res.data || [] };
};
defineExpose({
  getFormData
});
</script>

<style lang="scss" scoped>
.factory-brand-info {
  // height: calc(100% - 60px);
  :deep(.arco-layout.arco-layout-has-sider) {
    height: calc(100vh - 198px);
    position: relative;
  }
  :deep(.arco-layout-sider) {
    background-color: #f5f7fa;
    padding-bottom: 96px;
    border-right: 1px solid #d8d8d8;
    .brand-list {
      padding-top: 20px;
      .brand-item {
        line-height: 24px;
        margin-bottom: 10px;
        padding: 0 10px;
        cursor: pointer;
        &.active {
          background-color: #d9e8ff;
        }

        & > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            display: inline-block;
            display: flex;
            align-items: center;
          }
        }
        img {
          width: 16px;
          height: 16px;
        }
      }
    }
    .add-btn {
      position: absolute;
      bottom: 32px;
      left: 32px;
      width: 136px;
    }
  }
}
</style>
